<template>
<div class="probe-box">
    <div class="main-box" v-for="(item, index) in probeList" :key="index">
        <div class="img-box">
            <video v-if="item.type==20" class="video" :src="item.video.file_path" controls="controls" />
            <img v-if="item.type==10" :src="item.image[0]['file_path']" alt="">
            <svg-icon v-if="item.type==20" icon-class="yinpin" class="img-box-svg" />
            <svg-icon v-if="item.type==10" icon-class="danlietupian" class="img-box-svg" />
        </div>
        <div class="mid-box">
            <p class="ellipsis_single title">{{item.content}}</p>
            <div class="mid-box-content flex-row flex-justify-b">
                <div class="flex-row flex-align-c" v-if="item.user">
                    <img :src="item.user.avatarUrl" alt="">
                    <span>{{item.user.nickName}}</span>
                </div>
                <div class="flex-row flex-align-c">
                    <svg-icon icon-class="dianzan" />
                    <span>{{item.likes}}</span>
                    <svg-icon icon-class="pinglun" />
                    <span>{{item.comment}}</span>
                </div>
            </div>
        </div>
        <div class="btns-box flex-row">
            <el-button class="btns-box-btn" @click="changeItem({ id:item.shop_id,is_show:item.is_show,type:'change'})">{{item.is_show==10?'显示':'隐藏'}}</el-button>
            <el-button class="btns-box-btn" @click="goEdit(item.shop_id)">编辑</el-button>
            <!-- <router-link tag="div" :to="{path:'/merchant/probeAdd', query :{ shop_id:item.shop_id}}">
                <el-button class="btns-box-btn">编辑</el-button>
            </router-link> -->
            <el-button class="btns-box-btn" @click="changeItem({ id:item.shop_id,type:'del'})">删除</el-button>
        </div>
    </div>
</div>
</template>

<script>
export default {
  props: {
    changeEvt: {
      type: Function,
      required: false
    },
    probeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
  },
  watch: {
    // 'config.wechatFiles': {
    //   handler(newData, oldData) {
    //     console.log(newData, oldData)
    //     if (typeof newData === 'string') {
    //       console.log(newData, '23123newdata')
    //       this.$nextTick(() => {
    //         this.tableFormatData.userTable.files.res = '1'
    //       })
    //     }
    //   },
    //   immediate: true,
    //   deep: false
    // }
  },
  computed: {
  },
  data() {
    return {
    }
  },
  methods: {
    goEdit(id) {
      this.$router.push({ path: '/merchant/probeAdd', query: { shop_id: id }})
    },
    changeItem(filedata) {
      this.changeEvt(filedata)
    }
  }
}
</script>

<style lang="scss" scoped>
.probe-box {
    .main-box {
        width: 19%;
        margin-right: 20px;
    }

    .img-box {
        height: 150px;
        width: 100%;
        border: 1px solid #dcdfe6;
        background: #f2f2f2;
        position: relative;

        video {
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .img-box-svg {
            position: absolute;
            right: 8px;
            bottom: 8px;
            font-size: 20px;
        }
    }

    .mid-box {
        height: 80px;
        background: #ffffff;
        padding: 10px;
        border-left: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;

        .title {
            margin-bottom: 10px;
        }

        .mid-box-content {
            img {
                height: 30px;
                width: 30px;
                border-radius: 50%;
                margin-right: 10px;
            }

            svg {
                font-size: 16px;
                margin: 0 4px;
            }
        }
    }

    .btns-box {
        .btns-box-btn {
            width: 33.33%
        }

        /deep/ .el-button+.el-button {
            margin-left: 0;
        }

        /deep/ .el-button {
            border-radius: 0;
        }
    }
}
</style>
